import React, { Component } from "react";

//引入layout组件
import LayoutAsicle from "./components/asicle";
import LayoutHeader from "./components/header";
import ContentMain from "../../components/ContentMain/Index";
//引入css
import "./layout.scss";
//引入入antd
import { Layout } from "antd";
const { Sider, Content, Header } = Layout;
export default class Index extends Component {
  //初始化数据状态
  state = {
    collapsed: false,
  };
  componentDidMount() {
    const collapsed = JSON.parse(sessionStorage.getItem("collapsed"));
    this.setState({ collapsed });
  }
  toggleCollapsed = () => {
    const collapsed = !this.state.collapsed;
    this.setState({
      collapsed,
    });
    sessionStorage.setItem("collapsed", collapsed);
  };
  render() {
    return (
      <Layout className="logo-warp">
        {/* 头部标签 */}
        <Header className="header-warp">
          <LayoutHeader
            toggle={this.toggleCollapsed}
            collapsed={this.state.collapsed}
          />
        </Header>
        <Layout>
          <Sider width="250px" collapsed={this.state.collapsed}>
            {/* 侧边菜单栏 */}
            <LayoutAsicle></LayoutAsicle>
          </Sider>
          <Content className="content-warp">
            <ContentMain />
          </Content>
        </Layout>
      </Layout>
    );
  }
}
